﻿<!DOCTYPE html>
<html lang="en">

<head>
    <!-- IIS Virtual Directory name -->
    <!--<base href="/JSViewer_MVC_Core/">-->

    <meta charset="utf-8">
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>JS Viewer</title>
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
</head>

<body onload="loadViewer()">
    <div style="width: 100%; overflow-x: hidden" hidden="hidden">
        <div style="float:left; width: 200pt" class="main-nav navbar" >
            <div id='list-heading'>Select report</div>
            <ul id="reportsList" class="nav navbar-nav"></ul>
        </div>
        <div style="float:right;width:calc(100% - 200pt)">
            <input type="button" value="设计" id="btnDesign" />
            <input type="button" value="test设计" id="btnDesign1" />
            <input type="button" value="后端生成PDF然后导出" id="btnExportPDF" />
            <div id="viewerContainer">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="jsViewer.min.js"></script>
    <script type="text/javascript" src="jquery-3.6.3.min.js"></script>
    <script type="text/javascript">
        let viewer;
        let reportInfo = { templateCode : 0,reportName : "" };

        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                parametersPanel: { location: 'left' }
            });
            localize();
            populateReports();
            //var obj = { templateId: "6", hospitalCode: "9bb029d0-5da0-4118-9d19-06b829eede46", reportdec:"报表"};
            //ShowReports(obj);
        }

        function setActive(report) {
            let reportsList = document.getElementById("reportsList");
            let reports = reportsList.children;
            for (let i = 0; i < reports.length; i++) {
                reports[i].classList.remove('active');
            }
            report.classList.add('active');
        }
        //function ShowReports(obj) {
        //    if (obj)
        //    {
        //        const templateId = obj.templateId;
        //        const hospitalCode = obj.hospitalCode;
        //        const reportdec = obj.reportdec;
        //        let reportName = templateId + "_" + hospitalCode + "_" + reportdec;
        //        let initializeReportUrl = "InitReport/" + templateId + "/" + hospitalCode;
        //        $.ajax({
        //            type: "get",
        //            url: initializeReportUrl,
        //            dataType: "json",
        //            success: function (res) {
        //                debugger;
        //                if (res.Code == 0) {
        //                    //reportInfo.templateCode = templateCode;
        //                    //reportInfo.reportName = reportName;
        //                    viewer.openReport(reportName);
        //                    //setActive(report);
        //                }
        //            }
        //        })
        //    }
           
        //}

        function populateReports() {
            let reportsList = document.getElementById("reportsList");
            let oReq = new XMLHttpRequest();
            oReq.onload = function () {
                let reportsArray = JSON.parse(this.responseText);
                for (let i = 0; i < reportsArray.length; i++) {
                    console.log(reportsArray[i]);
                    const templateEnName = reportsArray[i].TemplateEnName;
                    const templateName = reportsArray[i].TemplateDesc;
                    const templateCode = reportsArray[i].TemplateCode;
                    const templateType = reportsArray[i].TemplateType;
                    const reportNameSuffix = reportsArray[i].ReportNameSuffix;
                    const report = document.createElement('li');
                    report.className = 'reportList_item';
                    if (i === 0) report.className += ' active'
                    const title = document.createElement('span');
                    title.innerText = templateName;
                    report.appendChild(title);
                    reportsList.appendChild(report);

                    report.addEventListener('click', function () {
                        /*let reportName = "1001_" + templateCode + "_" + templateType+ "_" + templateEnName + "." + reportNameSuffix;*/

                        /* let initializeReportUrl = "initializeReport/1001/2/" + templateCode;*/

                        let reportName = "6_" + "9bb029d0-5da0-4118-9d19-06b829eede46"+"_"+"报表";
                        let initializeReportUrl = "InitReport/6/" + "9bb029d0-5da0-4118-9d19-06b829eede46";

                        $.ajax({
                            type: "get",
                            url: initializeReportUrl,
                            dataType: "json",
                            success: function (res) {
                                debugger;
                                if (res.Code == 0) {
                                    reportInfo.templateCode = templateCode;
                                    reportInfo.reportName = reportName;
                                    viewer.openReport(reportName);
                                    setActive(report);
                                }
                            }
                        })
                    });
                }
                if (reportsArray.length > 0)
                    viewer.openReport(reportsArray[0]);
            };
            oReq.open("get", "reports?hospitalCode=1001&templateType=2", false);
            oReq.send();
        }

        function localize() {
            if (navigator.language === 'ja') {
                document.getElementById("list-heading").innerText = "レポートを選択";
                document.title = "JSビューア";
            }
        }

        $("#btnDesign").click(function () {
            window.open("/design/edit/" + reportInfo.templateCode + "/" + reportInfo.reportName);
        });
        $("#btnDesign1").click(function () {
            window.open("/design/kyedit/" + reportInfo.templateCode + "/" + reportInfo.reportName);
        });

        $("#btnExportPDF").click(function () {
            console.log("1");
            var exportUrl = "ExportPDFTest/" + reportInfo.reportName;
            $.ajax({
                type: "get",
                url: exportUrl,
                dataType: "json",
                success: function (res) {
                    console.log(res);
                }
            })
        });
    </script>
</body>
</html>